<template>
	<view class="container">
		<view class="title">团体预约</view>
		<view class="form-group">
			<label>团队名称：</label>
			<input type="text" v-model="teamName" placeholder="请输入团队名称" />
		</view>
		<view class="form-group">
			<label>预约人数：</label>
			<input type="number" v-model.number="totalPeople" placeholder="请输入预约人数" />
		</view>
		<view class="form-group" v-for="(member, index) in members" :key="index">
			<label>成员 {{ index + 1 }}：</label>
			<input type="text" v-model="member.name" placeholder="姓名" />
			<input type="text" v-model="member.idType" placeholder="证件类型" />
			<input type="text" v-model="member.idNumber" placeholder="证件号码" />
			<input type="number" v-model.number="member.phoneNumber" placeholder="手机号码" />
			<button @click="removeMember(index)">删除</button>
		</view>
		<button @click="addMember">添加同行人</button>


		<view class="">
			
				<button @click="submitReserve">提交预约
					</button>
			
		</view>
	
	

	</view>
</template>

<script>
	export default {
		data() {
			return {
				teamName: '',
				totalPeople: 0,
				members: [{
					name: '',
					idType: '',
					idNumber: '',
					phoneNumber: ''
				}, ],
			};
		},
		methods: {
			addMember() {
				if (this.members.length < this.totalPeople) {
					this.members.push({
						name: '',
						idType: '',
						idNumber: '',
						phoneNumber: ''
					});
				} else {
					uni.showToast({
						title: '已达到预约人数上限',
						icon: 'none'
					});
				}
			},
			removeMember(index) {
				if (this.members.length > 1) { // 假设至少保留一个成员  
					this.members.splice(index, 1);
					this.updateTotalPeople();
				}
			},
			updateTotalPeople() {
				this.totalPeople = this.members.length;
			},
			submitReserve() {
				uni.navigateTo({
					url:'/pages/successfulApointment/successfulApointment'
				})
				// 这里可以添加提交到服务器的逻辑  
				const reservation = {
					teamName: this.teamName,
					totalPeople: this.totalPeople,
					members: this.members,
				};
				console.log('提交团体预约:', reservation);
				// 发送请求到服务器  
				// uni.request({...});  
			},
		},
	};
</script>

<style>
	/* 添加你的样式 */
	.container {
		padding: 20px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.form-group {
		margin-bottom: 15px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.form-group label {
		margin-bottom: 5px;
	}

	.form-group button {
		margin-top: 10px;
	}
</style>